<template>
	<view>
		<up-cell-group :custom-style="customeStyles">
			<up-cell title="收货人">
				<template #value>
					<up-input v-model="name" placeholder="请填写收货人姓名" input-align="right" border="none"></up-input>
				</template>
			</up-cell>
			<up-cell title="手机号">
				<template #value>
					<up-input v-model="phone" placeholder="请输入手机号" input-align="right" border="none"></up-input>
				</template>
			</up-cell>
			<up-cell title="所在地区">
				<template #value>
					<view class="">
						<view class="" @click="show=true">
							{{area}}
						</view>
						<up-picker :show="show" ref="uPickerRef" :columns="columns" @confirm="confirm"
							@change="changeHandler"></up-picker>
					</view>
				</template>
			</up-cell>
			<up-cell>
				<template #title>
					<up-textarea placeholder="请填写详细地址"></up-textarea>
				</template>
			</up-cell>
		</up-cell-group>

		<up-cell-group :custom-style="customeStyles">
			<up-cell title="设置默认地址">
				<template #value>
					<up-radio-group v-model="check" style="width: 80rpx; flex:none;">
						<up-radio shape="circle" label=""></up-radio>
					</up-radio-group>
				</template>
			</up-cell>
		</up-cell-group>

		<view class="" style="padding: 40rpx;">
			<up-button type="error" shape="circle" text="删除"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const columns = reactive([
		['北京', '山西'],
		['西城', '东城', '海淀', '朝阳']
	]);
	const columnData = reactive([
		['西城', '东城', '海淀', '朝阳'],
		['太原', '大同', '忻州', '朔州']
	]);
	const uPickerRef = ref(null)
	const changeHandler = (e) => {
		const {
			columnIndex,
			value,
			values,
			index,
		} = e;

		if (columnIndex === 0) {
			uPickerRef.value.setColumnValues(1, columnData[index]);
		}
	};

	const confirm = (e) => {
		console.log('confirm', e);
		area.value = e.value.join("")
		show.value = false;
	};

	const show = ref(false)
	const name = ref("")
	const phone = ref("")
	const area = ref("请选择")
	const check = ref(false)
	const customeStyles = {
		backgroundColor: "#fff",
		marginTop: "40rpx"
	}
</script>

<style>

</style>